<template>
  <div class="moments-page">
    <!-- 顶部状态栏 -->
    <div class="status-bar">
      <span class="time">14:22</span>
      <div class="status-icons">
        <img src="src\assets\icon\signal.png" alt="Signal" class="icon" />
        <img src="src\assets\icon\WIFI.png" alt="WiFi" class="icon" />
        <img src="battery.png" alt="Battery" class="icon" />
      </div>
    </div>

    <!-- 返回键和详细按钮 -->
    <div class="top-bar">
      <img src="back-icon.png" alt="Back" class="back-icon" />
      <span class="title">详情</span>
      <img src="details-icon.png" alt="Details" class="details-icon" />
    </div>

    <!-- 用户名和头像部分 -->
    <div class="moments-detail">
      <div class="header">
        <img :src="avatar" class="avatar" alt="User Avatar" />
        <div class="user-info">
          <h3>{{ username }}</h3>
        </div>
      </div>

      <!-- 朋友圈内容部分 -->
      <div class="content">
        <p>{{ postContent }}</p>
        <div class="image-gallery">
          <img v-for="(image, index) in postImages" :key="index" :src="image" class="post-image" alt="Post Image" />
        </div>
      </div>

      <!-- 时间和评论部分 -->
      <div class="footer">
        <p class="created-at">{{ createdAt }}</p>
        <div class="comments">
          <div v-for="(comment, index) in comments" :key="index" class="comment">
            <strong>{{ comment.user }}:</strong> {{ comment.text }}
          </div>
        </div>
      </div>
    </div>

    <!-- 底部输入框和操作栏 -->
    <div class="bottom-bar">
      <input type="text" placeholder="评论" class="comment-input" />
      <img src="like-icon.png" alt="Like" class="like-icon" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      avatar: require('@/assets/jpg/0GS3PMVzi0GGOwb.jpg'), // 头像路径
      username: '两块钱的冰', // 用户名
      createdAt: '2024年8月27日 21:07', // 创建时间
      postContent: '一个人出来乱逛，地上看到个江...这里的环境似乎包容万物🎉🎉', // 朋友圈内容
      postImages: [ // 多张图片
        require('@/assets/jpg/image1.jpg'),
        require('@/assets/jpg/image2.jpg'),
        require('@/assets/jpg/image3.jpg'),
        require('@/assets/jpg/image4.jpg'),
        require('@/assets/jpg/image5.jpg'),
        require('@/assets/jpg/image6.jpg'),
        require('@/assets/jpg/image7.jpg'),
        require('@/assets/jpg/image8.jpg'),
        require('@/assets/jpg/image9.jpg'),
      ],
      comments: [
        { user: '21电信揭阳11班林字楠', text: '这是哪里 挺漂亮的😺' },
        { user: '两块钱的冰', text: '在江北，哈哈哈' },
        { user: '泽佳', text: '这地方，应该巨爽我觉得🤪' },
      ],
    };
  },
};
</script>

<style scoped>
.moments-page {
  max-width: 400px; /* 设置最大宽度 */
  margin: 0 auto; /* 居中显示 */
  padding: 0 10px; /* 添加一些左右内边距 */
}

/* 顶部状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
  background-color: #f0f0f0;
  color: black;
}

.time {
  font-size: 16px;
}

.status-icons .icon {
  width: 20px;
  margin-left: 5px;
}

/* 顶部返回和详细按钮 */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #fff;
}

.back-icon, .details-icon {
  width: 25px;
}

.title {
  font-size: 18px;
  color: black;
}

/* 朋友圈内容部分 */
.moments-detail {
  padding: 16px;
  background: #fff;
  margin-top: 10px;
  border-radius: 10px; /* 添加圆角 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.header {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-info h3 {
  margin: 0;
  font-size: 16px;
}

.content {
  margin: 10px 0;
  text-align: left;
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
}

.post-image {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.footer {
  margin-top: 10px;
}

.created-at {
  color: #888;
  font-size: 12px;
}

.comments {
  margin-top: 15px;
}

.comment {
  margin-bottom: 10px;
}

/* 底部输入框 */
.top-bar {
  max-width: 400px; /* 设置最大宽度 */
  margin: 0 auto; /* 居中显示 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px; /* 添加圆角 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}


.comment-input {
  flex: 1;
  border: 1px solid #ccc;
  border-radius: 15px;
  padding: 5px 10px;
  margin-right: 10px;
}

.like-icon {
  width: 25px;
}

</style>
